<template>
  <div>
    <div class="grid" style="--row: 1;">
      <div class="i-box" style="--h: 3rem;">
        <XmolBox title="Xbar" style="--freeH: 100%">
          <Xbar :seriesData="seriesData" :xAxis="xAxis" yUnit="万" dateFormat="noset" v-if="showChart"></Xbar>
        </XmolBox>
      </div>

      <div class="i-box" style="--h: 3rem;">
        <XmolBox title="Xbar堆叠" style="--freeH: 100%">
          <Xbar :seriesData="seriesData1" :xAxis="xAxis1" :yUnitList="['猪场/家', '万元']" dateFormat="noset" v-if="showChart"></Xbar>
        </XmolBox>
      </div>
    </div>
    <div class="i-box" style="--h: 3rem;margin-top: 0.2rem">
      <XmolBox title="XbarLine" style="--freeH: 100%">
        <XbarLine :seriesData="seriesData2" :xAxis="xAxis2" name="金额" yBarUnit="金额（万元）" yLineUnit="猪场/家" v-if="showChart"></XbarLine>
      </XmolBox>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // xbar
      seriesData: [{name: '信贷金额', data: [ 16, 17, 18, 19, 21 ]}, {name: '保险理财', data: [ 25, 25, 41, 30, 15 ]}],
      xAxis: [ '上海银行', '三湘银行', '建设银行', '重庆富民银行', '邮储银行' ],
      showChart: true,
      // Xbar堆叠
      seriesData1: [{name: '信贷金额', stack: 'num', data: [ 16, 17, 18, 19, 21 ]}, {name: '保险理财', stack: 'num', data: [ 25, 25, 41, 30, 15 ]}, {name: '金融股票', yIndex: 1, data: [ 22, 15, 12, 13, 15 ]}],
      xAxis1: [ '上海银行', '三湘银行', '建设银行', '重庆富民银行', '邮储银行' ],
      // xbarline
      seriesData2: [ { name: '花生', type: 'bar', data: [ 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6 ] }, { name: '母猪', type: 'line', yIndex: 1, data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3] } ],
      xAxis2: ['2021-12-01', '2021-12-02', '2021-12-03', '2021-12-04', '2021-12-05', '2021-12-06', '2021-12-07']
    };
  },
  mounted () {
  },
  methods: {
  }
};
</script>
